<template>
  <div class="rankingItem" v-for="(item, index) in soaringList" :key="index">
    <div class="rankingHeader">
      <div class="nameh4">{{ item.name }}</div>
      <div class="uptimes">最近更新：{{ timeFilter(item.updateTime) }}</div>
    </div>
    <div class="rankingMain">
      <div class="rankingSong" v-for="jitem in item.tracks" :key="jitem.id">
        <div class="rankingSong-cover">
          <img :src="jitem.al.picUrl" alt="" />
        </div>
        <div class="rankingSong-info">
          <div>{{ jitem.name }}</div>
          <span v-for="sitem in jitem.ar" :key="sitem.id">{{
            sitem.name
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
import moment from 'moment'
const props = defineProps({
  soaringList: {
    type: Array,
    defaults: () => [],
  },
});

const timeFilter = (time:number)=>{
  return moment(time).format('YYYY-MM-DD HH:mm:ss');
}
</script>
<style scoped lang="scss">
.rankingItem {
  width: 24%;
  background-color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 15px;

  .rankingHeader {
    .nameh4 {
      font: {
        size: 22px;
        weight: 600;
      }
      margin-bottom: 10px;
    }

    .uptimes {
      font-size: 12px;
      color: #999;
    }
  }

  .rankingSong {
    height: 40px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .rankingSong-cover {
      width: 40px;
      height: 40px;
      box-shadow: 0 4px 6px #0000001f;
      img {
        width: 100%;
        height: 100%;
        border-radius: 3px;
      }
    }

    .rankingSong-info {
      font-size: 12px;
      margin-left: 10px;
      span {
        color: #999;
        display: inline-block;
        padding-top: 2px;
      }
    }
  }
}
</style>